<template>
  <div class="detailAll">
    <Nav :title="title" :back="back"></Nav>
    <div class="container">
      <div class="top">
        <img class="mainImg" :src="value.imgSrc" />
        <img
          class="music"
          :src="state?require('../assets/images/music/music-stop.png'):require('../assets/images/music/music-start.png')"
          @click="change"
        />
      </div>
      <div class="nav">
        <img class="navImg" :src="value.avatar" />
        <text class="navTime">{{value.date}}</text>
      </div>
      <div class="title">{{value.title}}</div>
      <div class="line">
        <img
          class="collect icon"
          :src="value.collected?require('../assets/images/icon/collection.png'):require('../assets/images/icon/collection-anti.png')"
          @click="collect(value._id,value.collected)"
        />
        <img class="share icon" src="../assets/images/icon/share.png" />
      </div>
      <div class="detail">{{value.detail}}</div>
    </div>

    <!-- <audio
      poster="{{poster}}"
      name="{{name}}"
      author="{{author}}"
      :src="value.music.url"
      id="myAudio"
    ></audio>-->
  </div>
</template>

<script>
import articleList from "../models/articleList";
import articleCollect from "../models/articleCollect";
import Nav from '../components/Nav'
export default {
  data() {
    return {
      title:"阅读",
      back:"/articleList",
      value: [],
      state: true
    };
  },
  components: {
    Nav
  },
  async mounted() {
    //获取详情页数据
    var res = await articleList();
    var data = res.data.res.filter(res => {
      return res._id == this.$route.query.id;
    });
    this.value = data[0];
  },
  methods: {
    //收藏按钮
    async collect(id, collected) {
      var state;
      if (collected) {
        state = false;
      } else {
        state = true;
      }
      await articleCollect(id, state); //请求收藏路由，操作数据库
      this.value.collected = state;
    },

    // 改变音乐播放状态
    change() {
      if (this.data.state) {
        this.audioCtx.pause();
      } else {
        this.audioCtx.play();
      }
      this.setData({
        state: !this.data.state
      });
    }
  }
};
</script>

<style scoped>
.detailAll {
  background-color: #f6f6f6;
}
.nav {
  display: flex;
  align-items: center;
}
.container {
  background-color: #fff;
  margin-bottom: 30px;
}
.container>div:not(.top){
  padding: 0 10px;
}
.top {
  position: relative;
}
.music {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}
.navImg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.navTime {
  font-size: 25px;
  margin-left: 50px;
}
.mainImg {
  width: 100%;
  height: 400px;
}
.title {
  margin: 20px 10px;
  font-weight: 800;
}
.detail {
  font-size: 30px;
  color: #888;
  overflow: hidden;
}
.line {
  margin: 60px 10px;
  border-bottom: 2px solid rgb(189, 187, 187);
  position: relative;
}
.icon {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.collect {
  top: -40px;
  right: 100px;
}
.share {
  top: -40px;
  right: 0px;
}
</style>